<html xmlns="http://www.w3.org/1999/xhtml">
	<title>Kalendarz miesiac</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta http-equiv="Content-Language" content="en">
    <meta http-equiv="Cache-Control" content="public">
    <link href="../calendar.css" rel="stylesheet">
<link href="../main.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>

<body>     
<div class="header">
	<h1>Laboratorium Laparoskopii</h1>
</div>

<div class="middleContent">
    <div class="inner">
        <div class="containerBox">
			<div class="sideColumn">
			<ul>
				<li>Witaj <span class="name">Opiekunie</span>!</li>
				</ul>
				<ul>
					<li >Stanowiska i narzedzia</li>
					<li  class="active">Kalendarz</li>
					<li  >Wyloguj</li>
				</ul>
            </div>
            <div class="mainColumn">
				<div class="switcher">
					<div class="actions">
						<div class="button"><input type="button" class="previous" value="Poprzedni"/></div>
						<div class="button name"><span></span> 2013</div>
						<div class="button"><input type="button" class="next" value="Nastepny"/></div></div>
					</div>
				<div id="calendar-list">
					<div class="column" id="mondays">
						<div class="weekname">Poniedzialek</div>
						<div class="content">
						</div>
					</div>
					<div class="column" id="tuesdays">
						<div class="weekname">Wtorek</div>
						<div class="content">
						</div>
					</div>
					<div class="column" id="wedensdays">
						<div class="weekname">Sroda</div>
						<div class="content">
						</div>
					</div>
					<div class="column" id="thursdays">
						<div class="weekname">Czwartek</div>
						<div class="content">
						</div>
					</div>
					<div class="column" id="fridays">
						<div class="weekname">Piatek</div>
						<div class="content">
						</div>
					</div>
				</div>
            </div>
            
        </div>
    </div>
</div>
<script>
var currentmonth=3;
function setUpCalendarMonthView(currentMonth) {
    var startDate = 1;
	var currentYear=2013;
    var date = new Date(currentYear, currentMonth, startDate)
    var calendar = $('#calendar-list');
    var temp = date.getDay() - 1;
    if (temp == -1) {
        startDate = 2;
        date = new Date(currentYear, currentMonth, startDate)
        temp = date.getDay() - 1;
    }
    if (temp == 5) {
        startDate = 3;
        date = new Date(currentYear, currentMonth, startDate)
        temp = date.getDay() - 1;
    }
    calendar.children("#mondays").children('.content').empty();
    date.setDate(date.getDate() - temp);
    drawMonthColumn(calendar, date, "#mondays", currentMonth);

    date  = new Date(currentYear, currentMonth, startDate)
    calendar.children("#tuesdays").children('.content').empty();
    date.setDate(date.getDate()+1 - temp);
    drawMonthColumn(calendar, date, "#tuesdays", currentMonth);

    date = new Date(currentYear, currentMonth, startDate)
    calendar.children("#wedensdays").children('.content').empty();
    date.setDate(date.getDate()+2 - temp);
    drawMonthColumn(calendar, date, "#wedensdays", currentMonth);

    date = new Date(currentYear, currentMonth, startDate)
    calendar.children("#thursdays").children('.content').empty();
    date.setDate(date.getDate()+3 - temp);
    drawMonthColumn(calendar, date, "#thursdays", currentMonth);

    date = new Date(currentYear, currentMonth, startDate)
    calendar.children("#fridays").children('.content').empty();
    date.setDate(date.getDate()+4 - temp);
    drawMonthColumn(calendar, date, "#fridays", currentMonth);
}

function drawMonthColumn(calendar, date, div, currentMonth) {
    for (var i = 0; i < 5; i++) {
        var blank = "blank";
        if (date.getMonth() == currentMonth)
            blank = "";
        calendar.children(div).children('.content').append("<div id=\"day" + date.getDate() + "\" class=\"calendar-day " + blank + "\"><div class=\"number\">" + date.getDate() + "</div><div class=\"count\">" + Math.floor((Math.random() * 10) + 1) + "</div></div>");
        date.setDate(date.getDate() + 7);
    }
}
$(document).ready(function() {
	setUpCalendarMonthView(currentmonth);
	$('.name span').text(currentmonth+1);
	$('.actions .previous').click(function (){
		currentmonth--;
		setUpCalendarMonthView(currentmonth);
		$('.name span').text(currentmonth+1);
	});
	$('.actions .next').click(function (){
		currentmonth++;
		setUpCalendarMonthView(currentmonth)
		$('.name span').text(currentmonth+1);
	});
});
</script>
</body>
</html>